import React from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import NavBar from '../components/NavBar';
import UserMenu from '../components/UserMenu';
import { Layout, Menu, Breadcrumb, Spin } from 'antd';
import {
  HomeOutlined,
  AppstoreOutlined,
  ExperimentOutlined,
  SettingOutlined,
  UserOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons';
import { useApp } from '../context/AppContext.jsx';

const { Sider, Content } = Layout;

const MENU_ITEMS = [
  { key: '/', icon: <HomeOutlined />, label: '首页' },
  { key: '/designer', icon: <AppstoreOutlined />, label: '页面设计' },
  { key: '/test-designer', icon: <ExperimentOutlined />, label: '设计器测试' },
  { key: '/settings', icon: <SettingOutlined />, label: '系统设置' },
  { key: '/profile', icon: <UserOutlined />, label: '个人中心' },
  { key: '/help', icon: <QuestionCircleOutlined />, label: '帮助中心' },
];

export default function MainContent({ onLogout, user }) {
  const location = useLocation();
  const navigate = useNavigate();
  const { loading } = useApp();
  const [collapsed, setCollapsed] = React.useState(false);
  // 动态高亮菜单
  const selectedKeys = [location.pathname];
  // 动态面包屑
  const breadcrumbItemsConfig = MENU_ITEMS
    .filter(item => location.pathname.startsWith(item.key))
    .map(item => ({ key: item.key, icon: item.icon, title: item.label }));

  if (loading) {
    return <Spin size="large" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }} />;
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <NavBar user={user} onLogout={onLogout} />
      <Layout>
        <Sider
          width={200}
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          style={{ background: '#fff', borderRight: '1px solid #e5e6eb' }}
        >
          <Menu
            mode="inline"
            selectedKeys={selectedKeys}
            style={{ height: '100%', borderRight: 0, fontSize: 16 }}
            items={MENU_ITEMS}
            onClick={({ key }) => navigate(key)}
          />
        </Sider>
        <Layout style={{ padding: '0 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }} items={breadcrumbItemsConfig} />
          <Content style={{ background: '#fff', borderRadius: 8, minHeight: 400, boxShadow: '0 2px 8px #f0f1f2' }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
} 